<template>
    <div>
        <div class="layout-main">
            <el-form ref="queryParams" inline label-position="right" label-width="180px" v-model="queryParams">
                <el-form-item label="编码">
                    <el-input size="small" v-model="queryParams.skuCode" placeholder="编码" style="width: 240px" @keyup.enter.native="search();return;" />
                </el-form-item>
                <el-form-item>
                    <el-button v-on:click="search()" type="primary" size="small">搜索</el-button>
                    <el-button v-on:click="reset()" size="small">重置</el-button>
                </el-form-item>
            </el-form>
            <!-- 
              <Table :loading="loading" :columns="columns" :data="disProductSkuPrices" border>
            </Table>
            -->
            <el-table size="small" :data="disProductSkuPrices" border style="width: 100%" v-loading="loading">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column align="center" width="140px" prop="skuCode" label="编码">
                    <template slot-scope="scope">
                        <CopyText :text="scope.row.skuCode"></CopyText>
                        <div style="margin-top: 10px;">
                            <CopyText :text="scope.row.newSkuCode"></CopyText>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column width="140px" align="center" prop="imgurl" label="">
                    <template slot-scope="scope">
                        <ErpImage :value="scope.row.imgurl"></ErpImage>
                        <div>
                            <CopyText :text="scope.row.variationName"></CopyText>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="120" prop="saleprice" label="价格(PHP)">
                </el-table-column>
                <el-table-column align="center" prop="length" label="仓库">
                    <template slot-scope="scope">
                        <div>
                            <el-table size="small" :data="scope.row.stocks" border style="width: 100%">
                                <el-table-column label="仓库" prop="warehouse" width="150">
                                </el-table-column>
                                <el-table-column label="库存" prop="stock" width="150">
                                </el-table-column>
                            </el-table>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="id" label="操作">
                    <template slot-scope="scope">
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :page-size="page.pageSize" show-total :total="page.total" :current="page.current" @on-change="changePage"></Page>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getProductList, getStorageProductStock } from "@/api/ProductApi"
export default {
    name: 'DisProductSkuPrice',
    components: {

    },
    data() {
        return {
            loading: false,

            queryParams: {

            },
            others: {

            },
            DisProductSkuPrice: {

            },
            page: {
                total: 0,
                current: 1,
                pageSize: 10
            },
            disProductSkuPrices: [

            ],
            rules: {}
        };
    },
    mounted: function() {
        this.getList();

    },
    methods: {
        getStock(skuCodes) {
            var me = this;
            getStorageProductStock({
                skuCodes: skuCodes.join(","),
                update: false
            }).then(response => {

                var body = response;
                if (body.status == 0) {

                    var obj = body.obj;
                    me.disProductSkuPrices.forEach((item, ind) => {

                        var wl = obj[item.skuCode.toLowerCase()];

                        if (wl) {
                            me.$set(item, "stocks", wl.warehouseList);
                        }

                    });


                } else {

                }

            }, response => {

            });
        },
        cbtime: function(value) {
            if (value) {
                this.queryParams.btime = value[0];
                this.queryParams.etime = value[1];
            } else {

            }
        },
        search: function() {
            this.page.current = 1;
            this.page.total = 0;
            this.getList();
        },
        reset: function() {
            this.queryParams = {};
            this.search();
        },
        changePage(current) {
            this.page.current = current;
            this.getList();
        },
        getList: function() {
            var me = this;
            var params = me.queryParams;
            params.current = me.page.current;
            params.pageSize = me.page.pageSize;
            me.loading = true;
            getProductList(params).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.page.total = body.obj.totalCount;
                    let skuCodes = [];
                    body.obj.list.forEach((item, ind) => {
                        me.$set(item, "stocks", []);
                        skuCodes.push(item.skuCode);
                    });
                    me.disProductSkuPrices = body.obj.list;
                    //获取库存
                    me.getStock(skuCodes);
                }
                me.loading = false;
            }, response => {
                me.loading = false;
            });
        }

    }
}
</script>
<style scoped>
</style>